<template>
  <div>
    <div class="table">
      <el-card class="box-card">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="course"
            label="课程名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="作业名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="submitter"
            label="提交人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="workContent"
            label="作业内容">
          </el-table-column>
          <el-table-column
            prop="submitContent"
            label="提交内容">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="150">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === 0 ? 'danger' : 'success'"
                disable-transitions>{{scope.row.status === 0 ? '未批改' : '已批改'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="score"
            label="分数"
            width="150">
          </el-table-column>
          <el-table-column
            label="操作"
            width="250">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">批改
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <el-dialog :close-on-click-modal="closeAble"
               title="批改作业"
               :close-on-press-escape="closeAble"
               :visible.sync="dialogFormVisible"
               width="30%"
               @close="close"
               @open="open">
      <el-form ref="formRef">
        <el-form-item label="分数" :label-width="'50px'">
          <el-input type="number" v-model="score" autocomplete="off"></el-input>
        </el-form-item>
        <div class="dialog-footer" style="text-align: right">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "workstation-tea",
        data() {
            return {
                tableData: [{
                    id: 0,
                    course: '《大学语文》',
                    name: '《作业一》',
                    submitter: '张三',
                    workContent: '抄写课文20遍',
                    submitContent: "抄写的20遍内容",
                    status: "已批改",
                    score: "98"
                },
                    {
                        id: 1,
                        course: '《大学语文》',
                        name: '《作业一》',
                        submitter: '李四',
                        workContent: '抄写课文20遍',
                        submitContent: "抄写的20遍内容",
                        status: "已批改",
                        score: "89"
                    },
                    {
                        id: 2,
                        course: '《大学语文》',
                        name: '《作业一》',
                        submitter: '王五',
                        workContent: '抄写课文20遍',
                        submitContent: "抄写的20遍内容",
                        status: "未批改",
                        score: "-"
                    },
                    {
                        id: 3,
                        course: '《大学语文》',
                        name: '《作业一》',
                        submitter: '赵六',
                        workContent: '抄写课文20遍',
                        submitContent: "抄写的20遍内容",
                        status: "未批改",
                        score: "-"
                    },
                    {
                        id: 4,
                        course: '《大学语文》',
                        name: '《作业一》',
                        submitter: '周七',
                        workContent: '抄写课文20遍',
                        submitContent: "抄写的20遍内容",
                        status: "已批改",
                        score: "65"
                    }],
                score: 0,
                dialogFormVisible: false,
                currentId: null,
                closeAble: false,
            }
        },
        mounted() {
            this.getList();
        },
        methods: {
            handleEdit: function (index, row) {
                this.currentId = row.id;
                this.open();
            },
            handleDelete: function (index, row) {
                this.currentId = row.id;
                this.$axios.post("/workSubmit/delete/" + this.currentId).then(res => {
                    if (res.data && res.data.code == 200) {
                        this.$message({
                            message: '删除成功!',
                            type: 'success'
                        });
                        this.getList();
                        this.close();
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            close() {
                this.dialogFormVisible = false;
            },
            open() {
                this.score = 0;
                this.dialogFormVisible = true;
            },
            save() {
                this.$axios.post("/workSubmit/updateScore?id=" + this.currentId + "&score=" + this.score).then(res => {
                    if (res.data && res.data.code == 200) {
                        this.$message({
                            message: '批改成功!',
                            type: 'success'
                        });
                        this.getList();
                        this.close();
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            getList() {
                this.$axios.get("/workSubmit/list").then(res => {
                    if (res.data && res.data.code == 200) {
                        this.tableData = res.data.result;
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
        }
    }
</script>

<style scoped>
  .red {
    color: red;
  }

  .green {
    color: green;
  }
</style>
